<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>个人简历</title>
    <link rel="stylesheet" href="advancedresume.css">

</head>

<body>
    <div id='top-line'></div>
    <div id='top-left-line'></div>
    <div id='top-right-line'></div>

    <img src='images/屏幕截图 2021-07-19 223210.png' alt="backgroundImage" id='background'>

    <div id='head-background'></div>

    <header>

        <div id='name-logo'>lsyanling 李声宇</div>

        <img src='images/那棵树.png' alt="头像" id="head-portrait">

        <div class='link'>
            <a href='#introduction'>个人介绍</a>
            <div class='line'></div>
            <a href='#project'>项目介绍</a>
            <div class='line'></div>
            <a href='#interaction'>给我留言</a>
        </div>

    </header>

    <section id='vision'>
        <h1>Windows后端职业发展愿景</h1>
        <p id='vision-text'>
            精通matlab，Fortran，8086汇编；熟练应用Basic，Pascal；熟悉C#，了解C/C++，Java；听说过HTML，CSS，JavaScript；认同PHP是世界上最好的语言(误)</br>
            </br>
            ★数据结构、算法等基本功扎实，熟悉C/C++、Python等编程语言，熟悉基本的SQL命令；</br>
            ★熟悉HTML5、CSS3、ES6，熟悉Cocos Creator开发工具；</br>
            ★有较强的学习能力和逻辑思维，有独立思考、解决问题的能力和良好的团队沟通、协作能力；
        </p>
        <div id='img-Email'>
            <img src='images/Email.png' alt="img-Email">
            <p>An_lishengyu@qq.com</p>
        </div>
        <div id='img-Phone'>
            <img src='images/Phone.png' alt="img-Phone">
            <p>+86 186 0707 1321</p>
        </div>
    </section>

    <section id='introduction'>

        <div id='introduction-skill'>

            <h1>技能掌握</h1>

            <div id='introduction-skill-block'>

                <div id='introduction-skill-text'>
                    <p>C</p>
                    <p>C++</p>
                    <p>Python</p>
                    <p>Java</p>
                    <p>HTML</p>
                    <p>CSS</p>
                    <p>JavaScript</p>
                    <p>TypeScript</p>
                </div>

                <div class='introduction-skill-bar'>
                    <div id="introduction-skill-bar1"></div>
                    <div id="introduction-skill-bar2"></div>
                    <div id="introduction-skill-bar3"></div>
                    <div id="introduction-skill-bar4"></div>
                    <div id="introduction-skill-bar5"></div>
                    <div id="introduction-skill-bar6"></div>
                    <div id="introduction-skill-bar7"></div>
                    <div id="introduction-skill-bar8"></div>
                </div>

            </div>

        </div>

        <div id='introduction-experience'>

            <ul id="ul-experience-choose">
                <li id="li-experience-choose1"><a href="#">教育经历</a></li>
                <li id="li-experience-choose2"><a href="#">工作经历</a></li>
                <li id="li-experience-choose3"><a href="#">参赛经历</a></li>
            </ul>

            <div id="expreience1">

                <div class="experience-years">
                    <div class="years">
                        2001—2007
                    </div>
                    <div class="years-content">
                        幼儿园，没什么好说的
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2007—2013
                    </div>
                    <div class="years-content">
                        小学，红领巾
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2013—2016
                    </div>
                    <div class="years-content">
                        初中，学习ing
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2016—2019
                    </div>
                    <div class="years-content">
                        决战高考1095天！
                    </div>
                </div>

                <div class="experience-last">
                    <div class="years">
                        2019-
                    </div>
                    <div class="years-content">
                        <b>大连理工大学 计算机科学与技术/本科</b></br>
                        </br>
                        <b>加权均分：</b> 90.40</br>
                        <b>GPA：</b> 3.47/4.0</br>
                        <b>专业排名：</b> 29/139</br>
                        </br>
                        <b>专业核心课程及分数：</b></br>
                        <span style="width:30px; display:inline-block"></span> 数据结构与算法(99)
                        <span style="width:30px; display:inline-block"></span> 程序设计训练(96)
                        <span style="width:30px; display:inline-block"></span> 程序设计基础(96)
                        </br>
                        <span style="width:30px; display:inline-block"></span> 数字逻辑(92)<span style="width:10px; display:inline-block"></span>离散数学1(94)<span style="width:10px; display:inline-block"></span>离散数学2(99)<span style="width:10px; display:inline-block"></span>汇编语言程序设计(93)
                    </div>
                </div>

            </div>

            <div id="expreience2">

                <div class="experience-years">
                    <div class="years">
                        2001—2007
                    </div>
                    <div class="years-content">
                        准备参加工作 -- 22年
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2007—2013
                    </div>
                    <div class="years-content">
                        准备参加工作 -- 16年
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2013—2016
                    </div>
                    <div class="years-content">
                        准备参加工作 -- 10年
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2016—2019
                    </div>
                    <div class="years-content">
                        准备参加工作 -- 7年
                    </div>
                </div>

                <div class="experience-last">
                    <div class="years">
                        2019-
                    </div>
                    <div class="years-content">
                        要不还是好好学习吧 -- 4年
                    </div>
                </div>

            </div>

            <div id="expreience3">

                <div class="experience-years">
                    <div class="years">
                        2001—2007
                    </div>
                    <div class="years-content">
                        普通话大赛全家一等奖
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2007—2013
                    </div>
                    <div class="years-content">
                        小学数学竞赛县一等奖
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2013—2016
                    </div>
                    <div class="years-content">
                        征文比赛校一等奖</br>
                        初中化学竞赛县二等奖
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2016—2019
                    </div>
                    <div class="years-content">
                        全国高中学生化学竞赛省二等奖</br>
                        江西省高中学生化学竞赛省一等奖</br>
                        江西省中学生生物学竞赛省级二等奖</br>
                        赣州市高中学生化学竞赛市一等奖
                    </div>
                </div>

                <div class="experience-last">
                    <div class="years">
                        2019-
                    </div>
                    <div class="years-content">
                        全国大学生数学竞赛(非数学类)一等奖</br>
                        辽宁省大学生数学竞赛(非数学类)一等奖</br>
                        华教杯数学竞赛优秀奖</br>
                        大连理工大学AI挑战赛二等奖
                    </div>
                </div>

            </div>

    </section>



    <section id='project'>

        <div>
            <div style="position: relative;">
                <div class="O-background"></div>
                <div class="proj-picture">
                    <img src="images/Car.jpg" alt="项目的DEMO图" style="width: 100%;height: 100%;">
                </div>
                <div id="project1" class="projects">
                    <div class="div-proj-div">
                        <div class="project-img">
                            <div><img src="images/Car.jpg" alt="项目的LOGO图" class="proj-img"></div>
                        </div>
                    </div>
                    <di class="project-all">

                        <div class="proj1">
                            <div class="project-head">车牌识别算法研究</div>

                            <div class="project-time">2021.03 - 至今</div>
                        </div>

                        <div class="proj2">
                            <div class="project-role">算法设计、开发</div>
                            <div class="line"></div>
                            <div class="project-organization">大连理工大学</div>
                        </div>

                        <div class="project-content">

                            基于Python环境下的Numpy、OpenCV、Tensorflow等库开发的车牌识别程序，对蓝色车牌、新能源车牌、军用车牌、警用车牌均有较高的识别准确率，对黄色车牌的识别率尚不足。</br>
                            </br>
                            利用车牌颜色和边缘特征、矩形长宽比特征搜索车牌，对倾斜车牌做仿射变换修正角度，分割字符，训练卷积神经网络识别字符。</br>
                            </br>
                            负责蓝色车牌和新能源车牌的定位和识别过程；编写矩形特征筛选、漫水填充算法和车牌二值化；训练字符识别模型。

                        </div>

                        <div class="proj3">

                            <div class="project-tag0">Python</div>
                            <div class="line"></div>
                            <div class="project-tag">OpenCV</div>
                            <div class="line"></div>
                            <div class="project-tag">Tensorflow</div>

                        </div>
                </div>
            </div>
        </div>

        <div>
            <div style="position: relative;">
                <div class="E-background"></div>
                <div class="proj-picture">
                    <img src="images/Exploring the Universe.jpg" alt="项目的DEMO图" style="width: 100%;height: 100%;">
                </div>
                <div id="project2" class="projects">
                    <div class="div-proj-div">
                        <div class="project-img">
                            <div><img src="images/Exploring the Universe.jpg" alt="项目的LOGO图" class="proj-img"></div>
                        </div>
                    </div>
                    <di class="project-all">

                        <div class="proj1">
                            <div class="project-head">Exploring the Universe</div>

                            <div class="project-time">2021.07 - 2021.08</div>
                        </div>

                        <div class="proj2">
                            <div class="project-role">逻辑设计、开发、测试</div>
                            <div class="line"></div>
                            <div class="project-organization">百度前端训练营精品班</div>
                        </div>

                        <div class="project-content">

                            <b>Gitee仓库：<a href="https://gitee.com/lsyanling/exploring-the-universe">https://gitee.com/lsyanling/exploring-the-universe</a></b></br>
                            <b><a href="https://lsyanling.gitee.io/exploring-the-universe-build/">查看Demo</a></b>
                            </br>
                            </br>

                            一个基于Cocos引擎开发的星际探索类小游戏，组件均使用TypeScript编写；</br>
                            </br>
                            游戏内容包含星系图，科技树，星系探索和突发事件等，具备一定规模的数据面板、逻辑模型和交互操作；支持PC端和大部分移动端。</br>
                            </br>
                            负责部分游戏内容和游戏逻辑的设计、开发，对游戏界面、游戏逻辑和数值部分进行测试。

                        </div>

                        <div class="proj3">

                            <div class="project-tag0">Cocos Creator</div>
                            <div class="line"></div>
                            <div class="project-tag">TypeScript</div>
                            <!-- <div class="line"></div>
                            <div class="project-tag">JavaScript</div> -->

                        </div>
                </div>
            </div>
        </div>

        <div>
            <div style="position: relative;">
                <div class="O-background"></div>
                <div class="proj-picture">
                    <img src="images/restaurant.jpg" alt="项目的DEMO图" style="width: 100%;height: 100%;">
                </div>
                <div id="project1" class="projects">
                    <div class="div-proj-div">
                        <div class="project-img">
                            <div><img src="images/restaurant.jpg" alt="项目的LOGO图" class="proj-img"></div>
                        </div>
                    </div>
                    <di class="project-all">

                        <div class="proj1">
                            <div class="project-head">HTML Restaurant Game</div>

                            <div class="project-time">2021.07 - 2021.07</div>
                        </div>

                        <div class="proj2">
                            <div class="project-role">个人项目</div>
                            <div class="line"></div>
                            <div class="project-organization">百度前端训练营</div>
                        </div>

                        <div class="project-content">

                            <b>Gitee仓库：<a href="https://gitee.com/lsyanling/html-restaurant-game">https://gitee.com/lsyanling/html-restaurant-game</a></b></br>
                            <b><a href="http://lsyanling.gitee.io/html-restaurant-game/">查看Demo</a></b>
                            </br>
                            </br>

                            一个纯HTML、CSS、JavaScript开发的移动端餐厅小游戏，包含简单的点击交互和动画效果；</br>
                            </br>
                            游戏交互包含接待顾客、点餐、安排厨师做菜、上菜、结账和安抚顾客，数据面板包括金钱、时间等。

                        </div>

                        <div class="proj3">

                            <div class="project-tag0">HTML</div>
                            <div class="line"></div>
                            <div class="project-tag">CSS</div>
                            <div class="line"></div>
                            <div class="project-tag">JavaScript</div>

                        </div>
                </div>
            </div>
        </div>

        <div>
            <div style="position: relative;">
                <div class="E-background"></div>
                <div class="proj-picture">
                    <img src="images/Resume.jpg" alt="项目的DEMO图" style="width: 100%;height: 100%;">
                </div>
                <div id="project1" class="projects">
                    <div class="div-proj-div">
                        <div class="project-img">
                            <div><img src="images/Resume.jpg" alt="项目的LOGO图" class="proj-img"></div>
                        </div>
                    </div>
                    <di class="project-all">

                        <div class="proj1">
                            <div class="project-head">HTML Resume</div>

                            <div class="project-time">2021.07 - 2021.07</div>
                        </div>

                        <div class="proj2">
                            <div class="project-role">个人项目</div>
                            <div class="line"></div>
                            <div class="project-organization">百度前端训练营</div>
                        </div>

                        <div class="project-content">

                            <b>Gitee仓库：<a href="https://gitee.com/lsyanling/html-resume">https://gitee.com/lsyanling/html-resume</a></b></br>
                            <b><a href="http://lsyanling.gitee.io/html-resume/">查看Demo</a></b>
                            </br>
                            </br>

                            一个纯HTML、CSS、JavaScript开发的简历页面，包含简单的点击交互和动画效果，需要在PC端查看。

                        </div>

                        <div class="proj3">

                            <div class="project-tag0">HTML</div>
                            <div class="line"></div>
                            <div class="project-tag">CSS</div>
                            <div class="line"></div>
                            <div class="project-tag">JavaScript</div>

                        </div>
                </div>
            </div>
        </div>

    </section>

    <section class='interact'>

        <div class='interact-atlas'>

            <div class='atlas-first-row'>

                <div class='interact-atlas-pic'>

                    <p>请给我点赞</p>

                    <div class='redheart-box' id='box1'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart1'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart1'>

                    </div>

                </div>

                <div class='interact-atlas-pic'>

                    <p>Please</p>

                    <div class='redheart-box' id='box2'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart2'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart2'>

                    </div>
                </div>
                <div class='interact-atlas-pic'>

                    <p>baidu</p>

                    <div class='redheart-box' id='box3'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart3'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart3'>

                    </div>

                </div>

                <div class='interact-atlas-pic'>

                    <p>baidu</p>

                    <div class='redheart-box' id='box4'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart4'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart4'>

                    </div>

                </div>

            </div>

            <div class='atlas-second-row'>

                <div class='interact-atlas-pic'>

                    <p>baidu</p>

                    <div class='redheart-box' id='box5'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart5'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart5'>

                    </div>

                </div>

                <div class='interact-atlas-pic'>

                    <p>baidu</p>

                    <div class='redheart-box' id='box6'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart6'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart6'>

                    </div>

                </div>

                <div class='interact-atlas-pic'>

                    <p>baidu</p>

                    <div class='redheart-box' id='box7'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart7'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart7'>

                    </div>

                </div>

                <div class='interact-atlas-pic'>

                    <p>baidu</p>

                    <div class='redheart-box' id='box8'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart8'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart8'>

                    </div>

                </div>

            </div>

        </div>

        <div class='interact-message' id='interact'>

            <h1>留言板</h1>

            <div class='interact-message-content'>

                <div class='interact-message-content-block' id='firstBox'>

                    <div class='personal-information'>

                        <div class='header-pic'>

                            <p>W</p>

                        </div>

                        <p class='personal-name'>WANG</p>

                    </div>

                    <div class='personal-message'>

                        <p>这个人很懒，什么也没说</p>

                    </div>

                </div>

                <div class='interact-message-content-block'>

                    <div class='personal-message'>
                        <p>这个人也很懒，什么也没说</p>
                    </div>

                    <div class='personal-information'>

                        <div class='header-pic'>

                            <p style="margin: 0px;">L</p>

                        </div>

                        <p class='personal-name'>lsyanling</p>

                    </div>

                </div>

                <div class='interact-message-content-block' id='firstBox'>

                    <div class='personal-information'>

                        <div class='header-pic'>

                            <p>W</p>

                        </div>

                        <p class='personal-name'>WANG</p>

                    </div>

                    <div class='personal-message'>

                        <p>这个人更懒，什么也没说</p>

                    </div>

                </div>


            </div>

            <div class='interact-message-speaking'>

                <input id='message-input' type='text' placeholder="很遗憾，留言板未完工">

                <div id='input-block'>

                    <input id='name-input' type='text' placeholder="在这里输入您的名字">

                    <input id='message-submit' type='submit' value='发表'>

                </div>

            </div>

        </div>

    </section>

    <footer>
        <p>你好呀</p>
        <p>谢谢阅读</p>
    </footer>

    <script src="advancedresume.js"></script>
</body>

</html>